<template>
  <view class="scl-search-page">

    <!-- 搜索框 - start -->
    <view class="search-container">
      <u-icon @click="backPage" name="arrow-left" color="#242424" size="28rpx"></u-icon>

      <view class="search-wrapper">
        <view class="left-box">
          <view class="search-icon" >
            <u-icon name="search" color="#BEDBBE" size="44rpx"></u-icon>
          </view>
          <input v-model="searchText" @confirm="searchHandle" type="text" placeholder-class="input-placeholder" value="" placeholder="搜索你感兴趣的内容" />
        </view>
        <view class="right-box" @click="searchHandle">
          搜索
        </view>
      </view>
    </view>
    <!-- 搜索框 - end -->

    <view class="main-content-wrapper">
      <view class="recommend-h1" v-if="currentType == 'recommend'">为你推荐</view>
      <view >      
        <mescroll-body  height="78%" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
                @up="fetchSclData" :down="downOption" :up="upOption">
          <SclBox isShowBg :discountType="discountType" :discountNum="discountNum" @clickBox="()=>checkNotCompleteScl(item.id,()=>itemClick(item))" v-for="item in dataList" :sclData="item" :key="item.id"/>
        </mescroll-body>
      </view>
    </view>

  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import SclBox from '@/components/SclBox.vue'
  import {mapGetters,mapState} from 'vuex'
  // import dayjs from 'dayjs'
  import {calculateDiscountedPrice} from '@/common/utils/util.js'
  import sclNotCompleteMixin from '@/mixins/sclNotCompleteMixin.js'
  import {
  	get_recommend_scl_list,
  	get_more_scl_list,
    getMoreSclInfo
  } from '@/common/api/scl_api.js'
  export default {
    mixins: [MescrollMixin,sclNotCompleteMixin],
    components:{
      SclBox
    },
    data() {
      return {
        
        bodyHeight:0,
        dataList:[],
        upOption: {
        	isBounce: true,
        	auto: false,
        	page: {
        		size: 10 // 每页数据的数量,默认10
        	},
        	noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        	empty: {
        		icon: '/static/images/img_no_data_order.png',
        		tip: '暂无更多测评'
        	}
        },
        searchText:'',
        currentType:'recommend'
      }
    },
    watch:{
      clientUserUid:{
        handler(val){
          if(val){
            this.shareData.path = '/pages/index/index?userType=sclList&inviteId='+val
          }
        },
        immediate:true
      },
    },
    computed:{
      ...mapGetters('user',['clientUserUid']),
      ...mapState({
        currentGroup:state => state.user.currentGroup,
        discountNum:state => state.user.discountNum,
        discountId:state => state.user.discountId,
        discountType:state => state.user.discountType,
      }),
    },
    onLoad() {
      console.log(this.windowHeight,'===this.windowHeight')
      this.bodyHeight = this.windowHeight - 120
      
      console.log(this.bodyHeight,'====this.bodyHeight')
    },
    methods: {
      backPage(){
        uni.navigateBack()
      },
      itemClick(item) {
      	if (item.reportId) {
      		uni.navigateTo({
      			url: '/subcontractorB/pages/sclResult/sclResult?reportId=' + item.reportId + '&sclId=' +
      				item.id
      		})
      	} else {
          
          this.$u.api.addLog({sclId:item.id,sourseType:this.currentType == '' ? 12 : 13})
      		uni.navigateTo({
      			url: '/subcontractorC/pages/sclIntroduce/sclIntroduce?paramObj=' + JSON.stringify({
      				sclId: item.id
      			})
      		})
      	}
      },
      searchHandle(){
        console.log('AAAAAAAA')
        if(this.$fangBaoClick()){
          return 
        }
        console.log('searchHandle ====')
        this.mescroll.resetUpScroll()
      },
      async getRecommendScl(){
        this.dataList = []
        let group = ''
        try{
          group = this.$store.state.user.currentGroup
        }catch(e){
          group = 'A'
        }
        const {data:dRes} = await getMoreSclInfo({
          isFree:'N',
          group:group,
          num:4
        })
        // const datas = 
        this.dataList = this.dataProcess(dRes.data) 
        this.currentType = 'recommend'
        // this.mescroll.endBySize(0, 0)
        this.mescroll.endBySize(4, 4)
      },
      async fetchSclData(page) {
      	if (page.num == 1) this.dataList = [];
      
        console.log(this.searchText,'====this.searchText')
      
        const formData = {}
        if(!this.searchText){
          return this.getRecommendScl()
        }
      
      	const {
      		data: dRes
      	} = await get_more_scl_list({
      		pageNo: page.num,
      		pageSize: page.size,
          group: this.currentGroup,
          sclName:this.searchText
      	})
      
      	console.log('测评数据：', dRes)
      
      	if (dRes.code === 200) {
      		const {
      			records = []
      		} = dRes.data
      		const datas = this.dataProcess(records)
      		if (this.dataList.length > 0) {
      			this.dataList = this.dataList.concat(datas)
      		} else {
      			this.dataList = datas
      		}
      		this.mescroll.endBySize(records.length, dRes.data.total);
      	} else {
      		this.$showToast("请求获取选择问题接口失败," + dRes.message)
      	}
        this.currentType = ''
      },
      dataProcess(rows){
        const tmpArr = []
        rows.map(item => {
            const tmpObj = JSON.parse(JSON.stringify(item))
            tmpObj.coverImg = item.coverImg||item.detailImg
            tmpObj.sclName = item.sclName||item.scl_name
            tmpObj.summary = item.summary||item.nickName
            
            /*
            if(this.discountId){
              console.log('dc-折扣前：',tmpObj.newOriginalPrice)
              tmpObj.originalPrice = item.newOriginalPrice
              tmpObj.newOriginalPrice = calculateDiscountedPrice(item.newOriginalPrice,this.discountNum)
              
              console.log('dc-折扣后：',tmpObj.newOriginalPrice)
            }
            */
            
            tmpArr.push(tmpObj)
        })
        return tmpArr
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.input-placeholder {
    font-size: 26rpx;
    font-family: PingFang-SC;
    font-weight: 500;
    color: rgba(190, 187, 187, .82);
  }
  /deep/.scl-box{
    margin-left: 12rpx;
    margin-right: 12rpx;
    width: 728rpx !important;
    // margin-top: 12rpx;
// box-shadow: 0px 2px 10px 0px #E2F3D0,0px 2px 10px 0px #E2F3D0,0px 2px 10px 0px #E2F3D0,0px 2px 10px 0px #E2F3D0;
  }

  .scl-search-page {
    background-color: #F3FCEA;

  }

  .scl-home-base-container {}

  .search-container {
    width: 750rpx;
    box-sizing: border-box;
    padding-bottom: 20rpx;
    padding-left: 20rpx;
    padding-right: 14rpx;
    // z-index: 2;
    // position: sticky;
    // top: calc(var(--status-bar-height) + 60px + 24rpx);
    position: fixed;
    top: 0;
    z-index: 4;
    background-color: #F3FCEA;
    padding-top: calc(var(--status-bar-height) + 60px + 24rpx);
    
    display: flex;
    justify-content: center;

  }


  .search-wrapper {
    margin: auto;
    width: 664rpx;
    box-sizing: border-box;
    padding-left: 12rpx;
    height: 56rpx;
    background: rgba(255, 255, 255, .82);
    border-radius: 28rpx;
    display: flex;

    // border: 1rpx solid rgba(70,165,59,0.82);
    // border-image: linear-gradient(to bottom,transparent 50%, rgba(70,165,59,0.82) 50%) 0 0 100%/1px 0;
    padding: 4rpx;
    
    justify-content: space-between;
    position: relative;
    
    &::before {
      content: " ";
      position: absolute;
      
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      border: 1px solid rgba(70,165,59,0.82);
      transform-origin: 0 0;
      transform: scale(0.5);
      border-radius: 56rpx;
    }

    .left-box {
      display: flex;
      align-items: center;
      margin-left: 18rpx;
      
      input{
        font-size: 26rpx;
        width: 490rpx;
      }
    }

    .right-box {
      font-size: 28rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      color: #FFFBFB;
      z-index:2;

      width: 85rpx;
      height: 50rpx;
      background: linear-gradient(180deg, #A9EE87 0%, #70D669 100%);
      border-radius: 26rpx;
      text-align: center;
      line-height: 50rpx;
    }

  }

  // search-wrapper - end
  
  .main-content-wrapper{
    width: 750rpx;
    box-sizing: border-box;
    margin-top: 264rpx;
    // height: 1456rpx;
    background: #FFFFFF;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    
    .recommend-h1{
      padding-top: 26rpx;
      padding-left: 44rpx;
      // margin-bottom: 24rpx;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
</style>